<!DOCTYPE html>
<html>
    <head>
        <title>
            注册
        </title>
        <link href="/static/base.css" rel="stylesheet" type="text/css">
        </link>
        <script src="/static/jquery3.4.js">
        </script>
        <script src="/static/jqueryCookie1.4.1.js">
        </script>
        <script src="/static/lib.js">
        </script>
        <script src="/static/layer/layer.js">
        </script>
    </head>
    <style type="text/css">
        .content{
        text-align: center;
        width:50%;
        height:40rem;
        border: 1px solid grey;
        margin: 0px auto;
    }
    .content p{
        text-align: left;
        padding-left: 30%;
    }
    img{
        display: none;
        width:70%;
    }
    </style>
    <body>
        <h1>
            账号注册
        </h1>
        <div class="content">
            <form action="" id="form" method="post" value="">
                <input name="user_id" type="hidden" value="">
                </input>
                <input name="token" type="hidden">
                </input>
                <p>
                    账号 :
                    <input name="user" type="text" value="">
                    </input>
                </p>
                <p>
                    头像 :
                    <input name="avator" type="file" value="">
                    </input>
                    <img src="">
                    </img>
                </p>
                <p>
                    密码 :
                    <input name="pwd" type="password" value="">
                    </input>
                </p>
                <p>
                    <input type="button" value="提交">
                    </input>
                </p>
            </form>
        </div>
    </body>
</html>
<script type="text/javascript">
    $(function(){
        // canvas();
        var postUrl = '/register'
        user = getUser()
        if (user) {
            console.log(user)
            $('[name="user"]').val(user.user_name)
            $('[name="pwd"]').val(user.user_pwd)
            $('[name="user_id"]').val(user.user_id)
            $('[name="token"]').val(localStorage.getItem('token'))
            if (user.user_avator != '') {
                $('[name="avator"]').next('img').eq(0).attr('src','/img/'+user.user_avator).show()
            }
            postUrl = '/edit'
        }
        $('[name="avator"]').on('change', function(){
            $(this).next('img').attr('src',window.URL.createObjectURL($('[type="file"]')[0].files[0])).show()
        })
        $(document).on('keydown',function(event){
            if(event.keyCode == 13){
                $('[type="button"]').click()
            }
        });
        //提交事件
        $('[type="button"]').on('click',function(){
            form1 = document.querySelector('#form')
            formValue = new FormData(form1);
                $.ajax({
                    url:postUrl,
                    data:formValue,
                    type:'post',
                    dataType:'json',
                    processData: false,   // jQuery不要去处理发送的数据
                    contentType: false,   // jQuery不要去设置Content-Type请求头
                    success:function(res) {
                        if (res.code == 200) {
                            if(res.data.token !='') {
                                localStorage.setItem("token", res.data.token);
                            }
                            layer.msg('<span style="color:black">'+res.msg+'</span>',{icon:1})
                            setTimeout(function(){
                                location.href = "/";
                            },1500)
                        }else{
                            layer.msg('<span style="color:black">'+res.msg+'</span>',{icon:2})
                        }
                    }
                })
        });
    })
</script>